  <template>
    <div class="play">
      <home-header></home-header>
      <home-nav :navIndex="navIndex"></home-nav>
      <div class="play-wrap">
        <div class="video-box">
          <div class="playing">正在播放：{{movies.title}} - {{txt}}</div>
          <iframe allowtransparency="true" allowfullscreen="true" class="iframe-video" id="iframe-video" :src=url></iframe>
        </div>
        <brief-card :movies="movies"></brief-card>
        <play-source :urlList="urlList" :pageList="pageList" @playMovie="playMovie"></play-source>
      </div>
      <bottom></bottom>
    </div>
</template>

<script>
import HomeHeader from '../components/HomeHeader'
import HomeNav from '../components/HomeNav'
import Bottom from '../components/Bottom'
import BriefCard from '@/components/BriefCard'
import PlaySource from '@/components/PlaySource'
import {getMovieInfo} from '@/api/movieList'
import {getMovieDetailInfo} from '@/api/movieDetail'
export default {
  name: 'Play',
  components: {
    HomeHeader,
    HomeNav,
    Bottom,
    BriefCard,
    PlaySource
  },
  data () {
    return {
      id: '',
      navIndex: -1,
      url: '',
      txt: '',
      movies: {},
      urlList: [],
      pageList: [],
      fullscreenLoading: true
    }
  },
  created () {
    this.id = this.$route.query.id
    this.url = this.$route.query.url
    this.txt = this.$route.query.name
    this.fetchData()
    this.fetchSeries()
  },
  methods: {
    playMovie (item) {
      let routeUrl = this.$router.resolve({
        path: '/play',
        query: {url: item.url, id: this.id, name: item.txt}
      })
      window.open(routeUrl.href, '_blank')
      // this.$router.push({path: '/play',query:{url:item.url,name:item.txt}})
    },
    fetchData () {
      let params = {
        source_id: this.id
      }
      getMovieInfo(params).then(response => {
        this.movies = response.data
        document.title = '正在播放 ' + this.movies.title
        this.fullscreenLoading = false
      })
    },
    fetchSeries () {
      let params = {
        source_id: this.id
      }
      getMovieDetailInfo(params).then(response => {
        let data = response.data
        for (let i = 0; i < data.video_type.length; i++) {
          this.urlList.push({'txt': data.video_type[i]})
        }
        this.pageList = response.data.video_series
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.play{
  .play-wrap{
    width: 980px;
    margin: auto;
    .video-box{
      margin: 10px 0;
      background: #060606;
      .playing{
        line-height: 40px;
        color: #fff;
        text-align: center;
      }
      .iframe-video{
        width: 100%;
        height: 500px;
        border: none;
      }
    }
  }
}
</style>
